<template>
	<view>
		<!-- 弹出框内容 -->

		<view class="popView" style="width: 100%; height: 400px;">
			<view class="popView-titleView">
				<text class="popView-titleView-text">地址选择</text>
				<image class="popView-titleView-image" mode="aspectFit" src="./image/shutDown-address.png"
					@click="closeImageClick"></image>
			</view>

			<!-- 头部 -->
			<view class="headPopView">
				<view class="popView-type">
					<view v-for="(item, index) in 3" :key="index" class="popView-type-block"
						:style="{width:tabScreenWidth+'px'}">
						<!-- <text v-if="selectArray <= index">请选择</text> -->


						<text class="popView-type-text"
							:class="index == selectArray.length ? 'popView-type-active' : selectArray.length < index ? 'popView-type-empty' : 'popView-type-text'">{{index == selectArray.length ? '请选择' : selectArray.length < index ? '' : headtitleArray[index] }}</text>



					</view>
				</view>
			</view>


			<!-- 列表 -->
			<view style="display: flex; flex-direction: row; margin-top: 30upx; width: 90%; margin-left: 5%;">
				<scroll-view style="height: 280px;" :style="{width:tabScreenWidth+'px'}" scroll-y="true">
					<!-- 列表 -->
					<view class="blockTwoClass" v-if="selectArray.length >= 0" :style="{width:tabScreenWidth+'px'}">
						<!-- 列表1 -->
						<view class="blockTwoClass-block">
							<view v-for="(item, index) in myProviceArray" :key="index" class="popView-block"
								@click="chooseProvice(index)">
								<text
									:class="proviceIndex == index ? 'popView-block-text-active' : 'popView-block-text'">{{item.LABEL}}</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<scroll-view style="height: 280px;" :style="{width:tabScreenWidth+'px'}" scroll-y="true">
					<!-- 列表 -->
					<view class="blockTwoClass" v-if="selectArray.length >= 1" :style="{width:tabScreenWidth+'px'}">
						<!-- 列表2 -->
						<view class="blockTwoClass-block">
							<view v-for="(item, index) in myCityArray" :key="index" class="popView-block"
								@click="chooseCity(index)">
								<text
									:class="cityIndex == index ? 'popView-block-text-active' : 'popView-block-text'">{{item.LABEL}}</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<scroll-view style="height: 280px;" :style="{width:tabScreenWidth+'px'}" scroll-y="true">
					<!-- 列表3 -->
					<view class="blockTwoClass" v-if="selectArray.length >= 2" :style="{width:tabScreenWidth+'px'}">
						<view class="blockTwoClass-block">
							<view v-for="(item, index) in myAreaArray" :key="index" class="popView-block"
								@click="chooseArea(index)">
								<text
									:class="areaIndex == index ? 'popView-block-text-active' : 'popView-block-text'">{{item.LABEL}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabScreenWidth: uni.getSystemInfoSync().windowWidth * 0.3,

				proviceIndex: -1, //省
				myProviceArray: [],

				cityIndex: -1, //市
				myCityArray: [],

				areaIndex: -1, //区
				myAreaArray: [],


				headtitleArray: [], //在头部显示的地址
				selectArray: [], //选择省市区的下标

			};
		},
		props: {
			dataArray: Array,
		},
		components: {

		},
		created() {
			console.log('请求省')
			this.requestForProvList()
		},
		methods: {
			chooseProvice(index) {
				console.log(index)
				//省
				this.clearData(0, index) //清空数据

			},
			chooseCity(index) {
				console.log(index)
				//市
				this.clearData(1, index) //清空数据

			},
			chooseArea(index) {
				console.log(index)
				//区
				this.clearData(2, index) //清空数据
				//数据传输 结束
				var navData = JSON.stringify({
					proviceDic: this.myProviceArray[this.proviceIndex],
					cityDic: this.myCityArray[this.proviceIndex],
					areaDic: this.myAreaArray[this.areaIndex]
				});
				this.$emit('mccClick', navData)
			},
			clearData(tag, index) {
				console.log('tag:' + tag, 'index:' + index)
				this.selectArray = [] //清空数组
				if (tag == 0) {
					console.log('headtitleArray11')
					this.proviceIndex = index
					this.cityIndex = -1
					this.areaIndex = -1
					this.selectArray.push(this.proviceIndex) //新增到最后一个
					this.headtitleArray = []
					this.headtitleArray.push(this.myProviceArray[this.proviceIndex].LABEL)

					console.log('headtitleArray:', this.headtitleArray)

					//请求城市信息
					// this.myCityArray = this.dataArray[this.proviceIndex].cityArray
					this.requestForCityList()

				} else if (tag == 1) {
					this.cityIndex = index
					this.areaIndex = -1
					this.selectArray.push(this.proviceIndex, this.cityIndex) //新增到最后一个
					this.headtitleArray = []
					this.headtitleArray.push(this.myProviceArray[this.proviceIndex].LABEL, this.myCityArray[this
						.cityIndex].LABEL)
					//请求区域信息
					// this.myAreaArray = this.myCityArray[this.cityIndex].areaArray
					this.requestForAreaList()
				} else if (tag == 2) {
					this.areaIndex = index
					this.selectArray.push(this.proviceIndex, this.cityIndex, this.areaIndex) //新增到最后一个

					this.headtitleArray = []
					this.headtitleArray.push(this.myProviceArray[this.proviceIndex].LABEL, this.myCityArray[this
							.cityIndex].LABEL,this.myAreaArray[this.areaIndex].LABEL)
				}

				console.log('selectArray:' + this.selectArray)
				console.log('headtitleArray:' + this.headtitleArray)
			},


			closeImageClick() {

				this.$emit('closeImageClick', 'close');

			},

			requestForProvList() {
				var param = {
					FLAG: "PROV"
				};
				console.log('请求网址：', this.$api.qryLimitProvCity)
				this.$request(this.$api.qryLimitProvCity, param, "GET")
					.then(res => {
						console.log('省份列表')
						if (res.rspCd + "" === this.$state.successCode) {

							this.myProviceArray = res.rspData
							//provCd

							//数据存储
							try {
								uni.setStorageSync('proviceDict', this.myProviceArray);
							} catch (e) {
								// error
							}

							console.log('省份列表:this.myProviceArray:', this.myProviceArray)

						} else {
							this.$toastError(res.rspInf)
						}
					})
					.catch(error => {

					});

			},
			requestForCityList() {
				var param = {
					FLAG: "CITY",
					VALUE: this.myProviceArray[this.proviceIndex].VALUE,
				};
				console.log('请求网址：', this.$api.qryLimitProvCity)
				this.$request(this.$api.qryLimitProvCity, param, "GET")
					.then(res => {
						console.log('城市列表')
						if (res.rspCd + "" === this.$state.successCode) {

							this.myCityArray = res.rspData
							//provCd

							console.log('城市列表:this.myCityArray:', this.myCityArray)

						} else {
							this.$toastError(res.rspInf)
						}
					})
					.catch(error => {

					});

			},
			requestForAreaList(){
				var param = {
					FLAG: "AREA",
					VALUE: this.myCityArray[this.proviceIndex].VALUE,
				};
				console.log('请求网址：', this.$api.qryLimitProvCity)
				this.$request(this.$api.qryLimitProvCity, param, "GET")
					.then(res => {
						console.log('城市列表')
						if (res.rspCd + "" === this.$state.successCode) {
				
							this.myAreaArray = res.rspData
							//provCd
				
							console.log('城市列表:this.myAreaArray:', this.myAreaArray)
				
						} else {
							this.$toastError(res.rspInf)
						}
					})
					.catch(error => {
				
					});
			}
		}
	}
</script>

<style lang="less">
	.blockTwoClass {
		display: flex;
		flex-direction: column;
		// justify-content: center;

		// position: fixed;
		// overflow-y: scroll; //position状态竖向滑动
		// overflow-x: hidden; //position状态不可横向滑动



		.blockTwoClass-block {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.popView-block {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				height: 80upx;

				.popView-block-text {
					// font-weight: bold;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 28upx;
					color: #333333;
					height: 80upx;
					width: 100%;
				}

				.popView-block-text-active {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-weight: bold;
					font-size: 28upx;
					color: #4488FF;
					height: 80upx;
					width: 100%;
				}

			}
		}


	}

	.popView {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		width: 100%;

		// position: fixed;
		// overflow-y: scroll; //position状态竖向滑动
		// overflow-x: hidden; //position状态不可横向滑动
		// top: 0;
		// left: 0;
		// width: 100%;
		// height: 90%;
		// opacity: 1;
		// z-index: 99;
		// background-color: #FFFFFF;

		.popView-titleView {
			display: flex;
			flex-direction: row;
			font-weight: bold;
			height: 120upx;

			.popView-titleView-text {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				font-size: 32upx;
				color: #333333;
			}

			.popView-titleView-image {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 40upx;
				width: 40upx;
				height: 100%;
			}
		}

		.headPopView {
			display: flex;
			align-items: center;
			width: 100%;
			height: 80upx;
			background-color: #F5F5F5;

			.popView-type {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 90%;
				margin-left: 5%;
				height: 40px;

				.popView-type-block {
					display: flex;
					align-items: center;

					.popView-type-text {
						font-size: 28upx;
						color: #666666;
					}

					.popView-type-active {
						font-size: 28upx;
						color: #4488FF;
					}

					.popView-type-empty {
						margin-left: 80upx;
						font-size: 28upx;
						color: #4488FF;
						padding: 0upx 0upx 0upx 0upx;
					}
				}
			}
		}


	}
</style>
